<template>
	<view class="container">
		<view class="bg pd_lr30" style="background: url(../../static/my_img/total_bg.png);background-repeat: no-repeat;background-size:100% 100%;height:50vh;">
			<view class="nav colorfff">
				<image src="../../static/my_img/arrow_l.png" mode="" @tap="back"></image>
				<text class="font34">总资产</text>
			</view>
			<view class="bill_box">
				<view class="bill_top">
					<view class="bill_top_left">
						<text class="font26">账户总资产</text>
						<text class="font38 bold">256253.00</text>
					</view>
					<view class="bill_top_right">
						<button type="primary">账单记录</button>
					</view>
				</view>
				<view class="bill_cen">
					<view class="bill_cen_left">
						<view class="hang">
							<text>今日收益</text>
							<image src="../../static/my_img/curve.png" mode=""></image>
						</view>
						<text>3,125.00</text>
					</view>
					<view class="bill_cen_right">
						<view class="hang">
							<text>广告佣金</text>
							<image src="../../static/my_img/curve.png" mode=""></image>
						</view>
						<text>3,125.00</text>
					</view>
				</view>
				<view class="bill_bot color5b font32">
					<view>充值</view>
					<view>提现</view>
				</view>
			</view>
		</view>
		<view class="equity pd_lr30">
			<view class="regular shadow m_t30">
				<view class="regular_left">
					<text class="font26" style="color: #848796;">定期权益</text>
					<view class="conversion">
						<text class="font38">0.00</text>
						<text class="font26 m_l20">≈$0.00 ≈¥0.00</text>
					</view>
				</view>
				<view class="regular_right">
					<image src="../../static/my_img/arrow_r.png" mode=""></image>
				</view>
			</view>
			<view class="current shadow m_t30">
				<view class="current_left">
					<text class="font26" style="color: #848796;">活期权益</text>
					<view class="conversion">
						<text class="font38">0.00</text>
						<text class="font26 m_l20">≈$0.00 ≈¥0.00</text>
					</view>
				</view>
				<view class="current_right">
					<image src="../../static/my_img/arrow_r.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			back () {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		position: relative;
		background: #f5f7f8;

		.nav {
			padding-top: 100upx;
			line-height: 88upx;
			display: flex;
			align-items: center;

			image {
				width: 16upx;
				height: 24upx;
			}

			text {
				margin: 0 auto;
			}
		}

		.bill_box {
			background: #fff;
			border-radius: 10upx;
			padding-top: 32upx;
			display: flex;
			flex-direction: column;

			.bill_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 24upx;

				.bill_top_left {
					display: flex;
					flex-direction: column;
				}

				button {
					font-size: 22upx;
					padding: 0 40upx;
					border: none;
					border-radius: 50upx;
					background: linear-gradient(left, #3e9dff, #5e60e8);
				}

				button::after {
					border: 0;
				}
			}

			.bill_cen {
				display: flex;
				margin: 30upx 24upx;

				.bill_cen_left,
				.bill_cen_right {
					width: 50%;
					display: flex;
					flex-direction: column;

					.hang {
						display: flex;
						align-items: center;
						font-size: 22upx;

						image {
							width: 60upx;
							height: 22upx;
							margin-left: 8upx;
						}
					}
				}
			}

			.bill_bot {
				width: 100%;
				background: #eeeff9;
				display: flex;
				padding: 20upx 0;
				border-radius: 0 0 10upx 10upx;

				view {
					width: 50%;
					text-align: center;
				}

				view:nth-of-type(1) {
					border-right: 1upx solid lightgray;
				}
			}
		}

		.equity {
			width: 100%;
			position: absolute;
			top: 40vh;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.regular,
			.current {
				width: auto;
				display: flex;
				background: #fff;
				border-radius: 10upx;
				align-items: center;
				justify-content: space-between;
				padding: 20upx 30upx;

				.regular_left,
				.current_left {
					display: flex;
					flex-direction: column;
				}

				.regular_right,
				.current_right {
					image {
						width: 16upx;
						height: 20upx;
					}
				}
			}

			.shadow {
				box-shadow:0 0 10px 5px #e5e9ee;
			}

		}
	}
</style>
